<template>
  <div>
    <div class="cost-title">
      付款方式<span> (单位：元)</span>
    </div>
    <el-table border
              class="mb20"
              :data="tableData">
      <template v-for="(column, index) in tableColumn">
        <el-table-column :key="index+column.type"
                         v-bind="column">
          <template slot-scope="scope">
            <div v-if="column.type === 'input'">
              <!-- 议价 上一次费用显示 -->
              <div v-if="status === '8' && waybillQuoteBargain && (scope.row[`${column.name}Before`] || scope.row[`${column.name}Before`] === 0)"
                   class="c-red">
                {{ 
                  scope.row[`${column.name}Before`] != scope.row[column.name]
                   ? scope.row[`${column.name}Before`]
                   : null
                }}
              </div>
              <el-input v-model.trim="scope.row[column.name]"
                        oninput="this.value=(this.value.match(/\d{0,7}(\.\d{0,2})?/)||[''])[0];" />
            </div>
            <span v-else>
              <el-row> {{ scope.row[column.name] ? thousandDigit(scope.row[column.name], 2) : 0 }}
                <el-tooltip v-if="column.financeStatus"
                            placement="top"
                            effect="light">
                  <div slot="content">
                    财务{{ financePayTips[column.financeStatus] }}{{column.label}}, 不能再修改</div>
                  <icon-svg class-name="iconClass ml8"
                            icon-name="bangzhuzhongxin1" />
                </el-tooltip>
              </el-row>
              <el-row v-if="column.financeStatus && waybillPrice[column.name] && scope.row[column.name] != waybillPrice[column.name]"
                      class="c-primary f14">
                {{column.label}}已生效的金额{{ waybillPrice[column.name] }}已被财务{{ financePayAction[column.financeStatus] }}，本次调整的金额{{ scope.row[column.name] || 0 }}将不生效
              </el-row>
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>

import { returnThousandDigit } from "@/libs/util.js";
export default {
  name: "PayType",
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    // 是否是合单
    isOneBill: {
      type: Boolean,
      default: false
    },
    status: {
      type: String,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    arrivePayFeeDisabled: Number, // 货到款是否已收已付 1：已收、2已付、3已收已付
    collectionFeeDisabled: Number, // 代收款是否已收已付
    prepayFeeDisabled: Number, // 预付款是否已收已付
    waybillPrice: {
      type: Object,
      default: null
    },
    waybillQuoteBargain: Boolean,
  },
  computed: {
    tableData () {
      return this.dataList.length ? this.dataList : [{}];
    },
    financePayTips () {
      return {
        1: "已收",
        2: "已付",
        3: "已收已付"
      }
    },
    financePayAction () {
      return {
        1: "收款",
        2: "付款",
        3: "收付款"
      }
    },
    tableColumn () {
      let column = [
        {
          label: "预付款",
          name: "prepayFee",
          type: this.disabled || this.prepayFeeDisabled ? "text" : "input",
          financeStatus: this.prepayFeeDisabled
        },
        {
          label: "货到付款",
          name: "arrivePayFee",
          type: this.disabled || this.arrivePayFeeDisabled ? "text" : "input",
          financeStatus: this.arrivePayFeeDisabled
        },
        {
          label: "代收货款",
          name: "collectionFee",
          type: this.disabled || this.collectionFeeDisabled ? "text" : "input",
          financeStatus: this.collectionFeeDisabled
        }
      ];
      if (this.isOneBill) {
        column = column?.slice(0, 2);
      }
      return column;
    },
  },
  methods: {
    thousandDigit (value, digit) {
      return returnThousandDigit(value, digit)
    }
  }
};
</script>
<style lang="scss" scoped>
.cost-title {
  margin-bottom: 15px;
  span {
    color: var(--prev-border-color-grey);
    font-size: 12px;
  }
}
.labelSty {
  font-size: 14px;
  color: #666;
  padding-left: 12px;
}
.h24 {
  height: 24px;
}
.c-red {
  color: var(--prev-color-text-purered);
}
.ml8 {
  margin-left: 8px;
}
</style>
